<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image-resolution</title>
    <style>
        html {
            column-width: 1.5in;
        }
        p {
            clear: both;
        }
        canvas {
            background: #ccc;
        }
        .res200 {
            image-resolution: 200dpi;
        }
        .res50 {
            image-resolution: 50dpi;
        }
        .container {
            border-left: blue dashed;
            border-right: blue dashed;
            width: 1in;
            overflow: visible;
        }
        .img-container {
            display: inline-block;
            line-height: 0;
            width: 1in;
            height: 1in;
        }
        .border-box {
            box-sizing: border-box;
            border: 5px solid rgba(0, 255, 0, 0.2);
            margin-left: -5px;
        }
        .bg {
            background-image: url("img/200x200.png");
            background-repeat: no-repeat;
            height: 200px;
        }
        .bg-size {
            background-image: url("img/300x300.png");
            background-repeat: no-repeat;
            height: 200px;
            background-size: 1in 1in;
        }
        .list-image {
            padding-left: 2in;
            list-style-image: url("img/200x200.png");
        }
        .content::before {
            content: url("img/200x200.png");
        }
        .content-size::before {
            /* This is not applied to the inserted image. */
            width: 1.5in;
        }
    </style>
</head>
<body>
<p>This blue band is 1 inch wide. All gray replaced elements below should be 1 inch wide.</p>
<div class="container">
    <!-- No constraint -->
    <p>
        img (PNG) <img class="res200" src="img/200x200.png" alt="">
    </p>
    <p>
        img (PNG) <img class="res50" src="img/50x50.png" alt="">
    </p>
    <p>
        img (SVG) <img class="res200" src="img/200x200.svg" alt="">
    </p>
    <p>
        img (SVG) <img class="res50" src="img/50x50.svg" alt="">
    </p>

    <!-- scaling down -->
    <!-- max-width (not effective) -->
    <p>
        img (PNG) <img class="res200" src="img/200x200.png" alt="" style="max-width: 1.5in">
    </p>
    <!-- max-width (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/200x200.png" alt="" style="max-width: 150%"></span>
    </p>
    <!-- max-width (effective) -->
    <p>
        img (PNG) <img class="res200" src="img/300x300.png" alt="" style="max-width: 1in">
    </p>
    <!-- max-width (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-width: 100%"></span>
    </p>
    <!-- max-height (not effective) -->
    <p>
        img (PNG) <img class="res200" src="img/200x200.png" alt="" style="max-height: 1.5in">
    </p>
    <!-- max-height (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/200x200.png" alt="" style="max-height: 150%"></span>
    </p>
    <!-- max-height (effective) -->
    <p>
        img (PNG) <img class="res200" src="img/300x300.png" alt="" style="max-height: 1in">
    </p>
    <!-- max-height (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-height: 100%"></span>
    </p>
    <!-- max-width (not effective), max-height (effective) -->
    <p>
        img (PNG) <img class="res200" src="img/300x300.png" alt="" style="max-width: 1.5in; max-height: 1in">
    </p>
    <!-- max-width (not effective), max-height (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-width: 1.5in; max-height: 100%"></span>
    </p>
    <!-- max-width (%, not effective), max-height (effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-width: 150%; max-height: 1in"></span>
    </p>
    <!-- max-width (effective), max-height (not effective) -->
    <p>
        img (PNG) <img class="res200" src="img/300x300.png" alt="" style="max-width: 1in; max-height: 1.5in">
    </p>
    <!-- max-width (effective), max-height (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-width: 1in; max-height: 150%"></span>
    </p>
    <!-- max-width (%, effective), max-height (not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-width: 100%; max-height: 1.5in"></span>
    </p>
    <!-- max-width (%, not effective), max-height (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-width: 150%; max-height: 100%"></span>
    </p>
    <!-- max-width (%, effective), max-height (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res200" src="img/300x300.png" alt="" style="max-width: 100%; max-height: 150%"></span>
    </p>

    <!-- scaling up -->
    <!-- min-width (not effective) -->
    <p>
        img (PNG) <img class="res50" src="img/50x50.png" alt="" style="min-width: 0.5in">
    </p>
    <!-- min-width (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/50x50.png" alt="" style="min-width: 50%"></span>
    </p>
    <!-- min-width (effective) -->
    <p>
        img (PNG) <img class="res50" src="img/45x45.png" alt="" style="min-width: 1in">
    </p>
    <!-- min-width (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-width: 100%"></span>
    </p>
    <!-- min-height (not effective) -->
    <p>
        img (PNG) <img class="res50" src="img/50x50.png" alt="" style="min-height: 0.5in">
    </p>
    <!-- min-height (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/50x50.png" alt="" style="min-height: 50%"></span>
    </p>
    <!-- min-height (effective) -->
    <p>
        img (PNG) <img class="res50" src="img/45x45.png" alt="" style="min-height: 1in">
    </p>
    <!-- min-height (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-height: 100%"></span>
    </p>
    <!-- min-width (not effective), min-height (effective) -->
    <p>
        img (PNG) <img class="res50" src="img/45x45.png" alt="" style="min-width: 0.5in; min-height: 1in">
    </p>
    <!-- min-width (not effective), min-height (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-width: 0.5in; min-height: 100%"></span>
    </p>
    <!-- min-width (%, not effective), min-height (effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-width: 50%; min-height: 1in"></span>
    </p>
    <!-- min-width (effective), min-height (not effective) -->
    <p>
        img (PNG) <img class="res50" src="img/45x45.png" alt="" style="min-width: 1in; min-height: 0.5in">
    </p>
    <!-- min-width (effective), min-height (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-width: 1in; min-height: 50%"></span>
    </p>
    <!-- min-width (%, effective), min-height (not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-width: 100%; min-height: 0.5in"></span>
    </p>
    <!-- min-width (%, not effective), min-height (%, effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-width: 50%; min-height: 100%"></span>
    </p>
    <!-- min-width (%, effective), min-height (%, not effective) -->
    <p>
        img (PNG) <span class="img-container"><img class="res50" src="img/45x45.png" alt="" style="min-width: 100%; min-height: 50%"></span>
    </p>

    <!-- Other replaced elements -->
    <p>
        video (PNG poster) <video class="res200" poster="img/200x200.png"></video>
    </p>
    <p>
        video (PNG poster) <video class="res50" poster="img/50x50.png"></video>
    </p>
    <p>
        video (SVG poster) <video class="res200" poster="img/200x200.svg"></video>
    </p>
    <p>
        video (SVG poster) <video class="res50" poster="img/50x50.svg"></video>
    </p>
    <!--
    <p>
        canvas <canvas></canvas>
    </p>
    -->
    <p>
        input[type=image](PNG) <input class="res200" type="image" src="img/200x200.png">
    </p>
    <p>
        input[type=image](PNG) <input class="res50" type="image" src="img/50x50.png">
    </p>
    <p>
        input[type=image](SVG) <input class="res200" type="image" src="img/200x200.svg">
    </p>
    <p>
        input[type=image](SVG) <input class="res50" type="image" src="img/50x50.svg">
    </p>

    <!-- width specified -->
    <p>
        img (PNG) <img class="res200" width="96" src="img/300x300.png" alt="">
    </p>
    <p>
        img (PNG) <img class="res200" style="width:1in" src="img/300x300.png" alt="">
    </p>
    <p>
        img (SVG) <img class="res200" src="img/300x300.svg" width="96" alt="">
    </p>
    <p>
        img (SVG) <img class="res200" src="img/300x300.svg" style="width:1in" alt="">
    </p>
    <p>
        video (PNG poster) <video class="res200" width="96" poster="img/300x300.png"></video>
    </p>
    <p>
        video (PNG poster) <video class="res200" style="width: 1in" poster="img/300x300.png"></video>
    </p>
    <p>
        video (SVG poster) <video class="res200" width="96" poster="img/300x300.svg"></video>
    </p>
    <p>
        video (SVG poster) <video class="res200" style="width: 1in" poster="img/300x300.svg"></video>
    </p>
    <!--
    <p>
        canvas <canvas class="res200" width="96"></canvas>
    </p>
    <p>
        canvas <canvas class="res200" style="width: 1in"></canvas>
    </p>
    -->
    <p>
        input[type=image](PNG) <input class="res200" type="image" src="img/300x300.png" width="96">
    </p>
    <p>
        input[type=image](PNG) <input class="res200" type="image" src="img/300x300.png" style="width: 1in">
    </p>
    <p>
        input[type=image](SVG) <input class="res200" type="image" src="img/300x300.svg" width="96">
    </p>
    <p>
        input[type=image](SVG) <input class="res200" type="image" src="img/300x300.svg" style="width: 1in">
    </p>

    <!-- box-sizing: border-box -->
    <p>
        img (PNG) <img class="res200 border-box" src="img/200x200.png" alt="">
    </p>
    <p>
        img (SVG) <img class="res200 border-box" src="img/200x200.svg" alt="">
    </p>
    <p>
        video (PNG poster) <video class="res200 border-box" poster="img/200x200.png"></video>
    </p>
    <p>
        video (SVG poster) <video class="res200 border-box" poster="img/200x200.svg"></video>
    </p>
    <!--
    <p>
        canvas <canvas class="res200 border-box"></canvas>
    </p>
    -->
    <p>
        input[type=image](PNG) <input class="res200 border-box" type="image" src="img/200x200.png">
    </p>
    <p>
        input[type=image](SVG) <input class="res200 border-box" type="image" src="img/200x200.svg">
    </p>
</div>

<p>nonexistent images should not be resized by image-resolution.</p>
<p>
    img (nonexistent) <img class="res200" src="img/nonexistent.png" alt="">
</p>
<p>
    input[type=image] (nonexistent) <input class="res200" type="image" src="img/nonexistent.png">
</p>

<p>↓Background image should be 1 inch wide.</p>
<div class="container">
    <p class="res200 bg"></p>
</div>

<p>↓Background image should be 1 inch wide.</p>
<div class="container">
    <p class="res200 bg-size"></p>
</div>

<p>↓List image should be 1 inch wide.</p>
<div class="container">
    <ul class="res200 list-image">
        <li></li>
    </ul>
</div>

<p>↓Generated content should be 1 inch wide.</p>
<div class="container">
    <p class="res200 content"></p>
    <p class="res200 content content-size"></p>
</div>
</body>
</html>